<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机评论展示</title>
    <style>
        /* 全局变量 */
        :root {
            --primary-color: #4A90E2;
            --secondary-color: #50E3C2;
            --neutral-color: #F5F7FA;
            --neutral-dark: #4A4A4A;
            --neutral-light: #E5E9F2;
            --text-color: #2D3748;
            --text-light: #718096;
            --rating-color: #F6AD55;
            --card-shadow: 0 4px 12px rgba(0,0,0,0.05);
            --card-hover-shadow: 0 6px 16px rgba(0,0,0,0.08);
            --transition: all 0.3s ease;
        }

        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        body {
            background-color: var(--neutral-color);
            color: var(--text-color);
            line-height: 1.6;
            min-height: 100vh;
        }

        /* 容器 */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem 1rem;
        }

        /* 头部 */
        header {
            text-align: center;
            margin-bottom: 3rem;
        }

        header h1 {
            color: var(--primary-color);
            font-size: clamp(1.8rem, 4vw, 2.5rem);
            font-weight: 700;
            margin-bottom: 1rem;
        }

        header p {
            color: var(--text-light);
            max-width: 600px;
            margin: 0 auto;
        }

        /* 加载更多按钮 */
        .load-more-container {
            text-align: center;
            margin-bottom: 3rem;
        }

        #load-more {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 0.75rem 2rem;
            border-radius: 2rem;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        #load-more:hover {
            background-color: #3A81D8;
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(74,144,226,0.2);
        }

        #load-more:active {
            transform: translateY(0);
        }

        #load-more.loading {
            cursor: not-allowed;
            opacity: 0.7;
        }

        #load-more.loading i {
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* 评论容器 */
        #comments-container {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.5rem;
        }

        /* 评论卡片 */
        .comment-card {
            background-color: white;
            border-radius: 1rem;
            padding: 1.5rem;
            box-shadow: var(--card-shadow);
            transition: var(--transition);
        }

        .comment-card:hover {
            box-shadow: var(--card-hover-shadow);
            transform: translateY(-3px);
        }

        /* 评论头部 */
        .comment-header {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            margin-bottom: 1rem;
        }

        /* 用户头像 */
        .user-avatar {
            width: 3rem;
            height: 3rem;
            border-radius: 50%;
            background-color: var(--primary-color);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            font-weight: 600;
            flex-shrink-0;
        }

        /* 用户信息 */
        .user-info {
            flex-grow: 1;
        }

        .user-name {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-color);
        }

        .comment-date {
            font-size: 0.85rem;
            color: var(--text-light);
        }

        /* 评分 */
        .rating {
            color: var(--rating-color);
            margin-bottom: 0.75rem;
        }

        .rating i {
            font-size: 0.9rem;
        }

        /* 评论标题 */
        .comment-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        /* 评论内容 */
        .comment-content {
            color: var(--text-light);
            line-height: 1.6;
        }

        /* 页脚 */
        footer {
            text-align: center;
            margin-top: 4rem;
            padding: 1rem;
            color: var(--text-light);
            font-size: 0.9rem;
        }

        /* 响应式布局 */
        @media (min-width: 768px) {
            #comments-container {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (min-width: 1024px) {
            #comments-container {
                grid-template-columns: repeat(3, 1fr);
            }
        }
    </style>
</head>
<body>
<div class="container">
    <header>
        <h1>随机评论展示</h1>
        <p>浏览这些来自不同用户的随机评论，分享他们的想法和感受</p>
    </header>

    <div class="load-more-container">
        <button id="load-more">
            <i class="fa fa-refresh"></i>
            <span>加载更多评论</span>
        </button>
    </div>

    <div id="comments-container">
        <!-- 评论将通过JavaScript动态生成 -->
    </div>

    <footer>
        <p>所有评论均为随机生成，不代表真实用户意见</p>
    </footer>
</div>

<script>
    // 模拟评论数据
    const generateRandomComment = () => {
        const names = ['张三', '李四', '王五', '赵六', '钱七', '孙八', '周九', '吴十'];
        const titles = [
            '一次难忘的体验', '这个真的很棒', '分享我的看法', '值得推荐', '非常不错的选择',
            '一点小建议', '总体感觉良好', '很有特色', '超出预期', '简单评价一下'
        ];
        const contents = [
            '这是我使用过的最好的产品之一，设计精美，功能强大，完全满足了我的需求。',
            '体验非常好，服务周到，环境舒适，下次一定会再来。',
            '虽然有些小缺点，但总体来说还是很满意的，性价比很高。',
            '质量非常好，做工精细，细节处理到位，推荐给大家。',
            '使用起来很方便，界面简洁明了，非常适合初学者。',
            '效果超出预期，比我想象的要好很多，很值得购买。',
            '服务态度非常好，解决问题很及时，给个好评。',
            '产品设计很有创意，实用性也很强，很喜欢。',
            '价格有点高，但品质确实不错，一分钱一分货。',
            '物流速度很快，包装也很精美，非常满意。'
        ];
        const dates = [];
        for (let i = 1; i <= 30; i++) {
            const date = new Date();
            date.setDate(date.getDate() - i);
            dates.push(date.toLocaleDateString('zh-CN'));
        }

        return {
            name: names[Math.floor(Math.random() * names.length)],
            title: titles[Math.floor(Math.random() * titles.length)],
            content: contents[Math.floor(Math.random() * contents.length)],
            date: dates[Math.floor(Math.random() * dates.length)],
            rating: Math.floor(Math.random() * 5) + 1
        };
    };

    // 生成星星评分HTML
    const generateRatingStars = (rating) => {
        let stars = '';
        for (let i = 1; i <= 5; i++) {
            if (i <= rating) {
                stars += '<i class="fa fa-star"></i>';
            } else {
                stars += '<i class="fa fa-star-o"></i>';
            }
        }
        return stars;
    };

    // 渲染评论
    const renderComments = (count = 6) => {
        const container = document.getElementById('comments-container');

        for (let i = 0; i < count; i++) {
            const comment = generateRandomComment();
            const commentElement = document.createElement('div');
            commentElement.className = 'comment-card';
            commentElement.innerHTML = `
          <div class="comment-header">
            <div class="user-avatar">${comment.name.charAt(0)}</div>
            <div class="user-info">
              <div class="user-name">${comment.name}</div>
              <div class="comment-date">${comment.date}</div>
            </div>
          </div>
          <div class="rating">${generateRatingStars(comment.rating)}</div>
          <div class="comment-title">${comment.title}</div>
          <div class="comment-content">${comment.content}</div>
        `;

            container.appendChild(commentElement);
        }
    };

    // 加载更多评论
    document.getElementById('load-more').addEventListener('click', function() {
        const button = this;
        button.classList.add('loading');

        setTimeout(() => {
            renderComments(3);
            button.classList.remove('loading');
        }, 800);
    });

    // 初始化页面
    document.addEventListener('DOMContentLoaded', () => {
        renderComments();
    });
</script>
</body>
</html>